<template>
  <a-modal width="618px" title="添加参与者" cancelText="取消" okText="确定" :visible="visible" @ok="handleOk"
           @cancel="handleCancel">
    <div class='addTeamMember'>
                <!-- <a-row>
                    <span style='display:inline-block;width:42px;'>角色:</span>
                    <a-select placeholder='请选择' v-model='modalMemberType'  @change='selectedMemberTypeChange' style='min-width:250px'>
                        <a-select-option   class='moreOptionItem' v-for='(item,index) in memberType' :key='index' :value='item.value'>{{item.name}}</a-select-option>
                    </a-select>
                </a-row> -->
                <a-row>
                    <span style='display:inline-block;width:42px;'>搜索:</span>
                    <a-input-search placeholder="输入关键字搜索" v-model='selectedEmployee' style="width: 250px" @search="handleSearch" />
                    
                </a-row>
                <a-row class='recentPeopleList' v-if='!searched'>
                    <div class='memberPanle'>
                        <a-checkbox class='memberType' :indeterminate='recentPeopelIndeterminate' v-model='rencentAllPeople' @change='checkAllBtn'>近期使用人员</a-checkbox>
                    </div>
                    <div class='recentPeoplePanel'>
                        <div class='clearFloat memberItem' style="overflow:hidden;" v-for='(item,index) in recentPeople' :key='index'>
                            <span style='float:left'>
                                <a-checkbox v-model='item.checked' @change='checkBoxChangeEvent($event,item,selectedRecentPeopleList)'>{{item.name}}{{'('+item.userId+')'}}<span v-if='item.englishName'>({{item.englishName}})</span></a-checkbox>
                            </span>
                            <span class='modalDept' style='float:right;'>
                                <!-- {{item.deptName}} -->
                                {{item.department}}
                            </span>
                        </div>
                    </div>
                </a-row>
                <a-row  class='recentPeopleList'  v-else>
                    <div class='memberPanle'>
                        <span >搜索结果</span>
                    </div>
                    <div class='recentPeoplePanel'>
                        <div class='clearFloat memberItem' style="overflow:hidden;" v-for='(item,index) in remotaData' :key='index'>
                            <span style='float:left'>
                                <a-checkbox v-model='item.checked' @change='checkBoxChangeEvent($event,item,selectedRecentPeopleList)'>{{item.name}}<span v-if='item.englishName'>({{item.englishName}})</span></a-checkbox>
                            </span>
                            <span class='modalDept' style='float:right;'>
                                <!-- {{item.deptName}} -->
                                {{item.deptAndPost}}
                            </span>
                        </div>
                    </div>
                </a-row>
                <div style='min-height:32px;'>
                    <span class='selectedRecentPersonSpan' v-for='(item,index) in selectedRecentPeopleList' :key='index'>
                        <span class='selectedRctPerItem'> 
                            {{item.name}}{{'('+item.userId+')'}}
                        </span>
                        <!-- <span class='selectedRctPerItem'>
                            {{item.deptName}}
                        </span> -->
                        <a-icon class='clearSltedRctPer' type="close" @click='clearCheckBoxShowPanel(item,selectedRecentPeopleList,"userNo")' />
                    </span>
                </div>
            </div>
  </a-modal>
</template>
<script>
import {mapGetters} from "vuex";
import {getProjectRole} from '@api/teamManagerApi.js'
import { getManagerMiddle,searchUserIdMiddle,serveManager as saveRecentUser } from "@api/singleProject";
import {Message} from "ant-design-vue";
export default {
  data() {
    return {
      userInfo:JSON.parse(sessionStorage.getItem('userInfo')),
      visible: true,
      modalMemberType: '',//下拉框选择的角色
      selectedEmployee: '',//搜索框内容
      selectedNofifyMemberList: [],
      remotaData: [],
      rencentAllPeople: false,
      selectedRecentPeopleList: [],
      memberType: [
        {name: "项目经理", value: 'PROJECT_MANAGER'},
        {name: "业务分析师(等级1)", value: "BA1"}
      ],
      recentPeople: [
        /*{name: '张三', deptName: '泵送', memberId: 1},
        {name: '李四', deptName: '重起', memberId: 2},
        {name: '王五', deptName: '重机', memberId: 3},
        {name: '陈六', deptName: '重装', memberId: 4},
        {name: '钱麻子', englishName: 'qianmazi', deptName: '竹胜园', memberId: 5},
        {name: '张三', deptName: '泵送', memberId: 6},
        {name: '李四', deptName: '重起', memberId: 7},
        {name: '王五', deptName: '重机', memberId: 8},
        {name: '陈六', deptName: '重装', memberId: 9},
        {name: '钱麻子', englishName: 'qianmazi', deptName: '竹胜园', memberId: 12345},*/
      ],//最近使用人复选框组
      recentPeopleListAll: [
        /*{name: '张三', deptName: '泵送', memberId: 1},
        {name: '李四', deptName: '重起', memberId: 2},
        {name: '王五', deptName: '重机', memberId: 3},
        {name: '陈六', deptName: '重装', memberId: 4},
        {name: '钱麻子', englishName: 'qianmazi', deptName: '竹胜园', memberId: 5},
        {name: '张三', deptName: '泵送', memberId: 6},
        {name: '李四', deptName: '重起', memberId: 7},
        {name: '王五', deptName: '重机', memberId: 8},
        {name: '陈六', deptName: '重装', memberId: 9},
        {name: '钱麻子', englishName: 'qianmazi', deptName: '竹胜园', memberId: 12345},*/
      ],//最近使用人复选框组，选中的数据(全部)
      recentPeopleList: [],//最近使用人复选框组，选中的数据（不一定是全部的）
      recentPeopelIndeterminate: false,//全选复选框的样式
      checkAll: false,//是否全选
      searched:false,//是否开启了搜索
      modalType:1,  //根据这个值去动态展示模态框内容，1：新增成员 2:通知成员
      copyMemberArr:[],//记录粘贴时选中的成员信息，点击复制时存值
      copyTypeArr:[],//记录粘贴时选中角色类型信息
      modalVisible:true,
    };
  },
  computed: {
    ...mapGetters({
      'fileSingleData': 'fileSingle'
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getNowTimePeople()
      /**
       * 功能: 获取角色
       * params:   {$event:鼠标事件对象}
       * return:   无
       */
      getProjectRole({
        oid: 'OR:com.pisx.pmgt.project.PIProject:' + sessionStorage.getItem('oid'),
      }).then((res) => {
        if (res && res.status === 200) {
          if (res.data && res.data.success) {
            if (res.data.data && res.data.data.length > 0) {
              this.memberType = res.data.data
            } else {
              this.memberType = []
            }
          } else {
            this.memberType = []
            this.$message.error(res.data.message)
          }
        } else {
          this.memberType = []
          this.$message.error('接口失败！')
        }
      })
    },
    /**
     * 功能: 复选框单选
     * params:   {$event:鼠标事件对象}
     * return:   无
     */
    onChange(e) {
      this.recentPeopelIndeterminate = !!e.length && e.length < this.recentPeople.length;
      this.checkAll = e.length === this.recentPeople.length;
      var NewArr =[];
      NewArr= e.map((item)=>{
        let str ={};
        for(let i=0;i<this.recentPeople.length;i++){
          if(this.recentPeople[i].userId == item){
            str.checked =  this.recentPeople[i].checked;
            str.department =  this.recentPeople[i].department;
            str.userNo =  this.recentPeople[i].userNo;
            str.name =  this.recentPeople[i].name;
            str.userId = this.recentPeople[i].userId;
          }
        }
        return str;
      })
      this.selectedRecentPeopleList = NewArr;
      console.log(this.recentPeople)
      console.log(NewArr)
      console.log(e)
    },
    /**
     * 功能: 全选复选框监听事件
     * params:   {$event:鼠标事件对象}
     * return:   无
     */
    onCheckAllChange(e) {
      let newCheckData = Object.assign(this, {
        recentPeopleList: e.target.checked ? this.recentPeopleListAll : [],
        recentPeopelIndeterminate: false,
        checkAll: e.target.checked,
      });
      this.recentPeopleList = newCheckData.recentPeopleList.map((rec) => {
        return rec.userId
      })
      console.log(this.recentPeopleList)
    },
    /**
     * 功能: 下拉框选择
     * params:   {$event:鼠标事件对象}
     * return:   无
     */
    seleChange(value) {
      this.modalMemberType = value
      console.log('modalMemberType:', this.modalMemberType)
    },
    /**
     * 功能: 获取近期使用人员
     * params:   {$event:鼠标事件对象}
     * return:   无
     */
    getNowTimePeople() {
      getManagerMiddle().then(res => {
        if (res.data.staffList) {
          const arr = res.data.staffList.split(',')
          const newStaffList = arr.filter((item, index) => {
            return arr.indexOf(item, 0) === index
          })
          let newArr = []
          let newList = []
          if (newStaffList.length > 10) {
            newList = newStaffList.slice(-10)
          } else {
            newList = newStaffList
          }
          let params = {
            match: true,
            userIds: newList,
          }
          searchUserIdMiddle(params).then(res1 => {
            res1.data.map(item => {
              item.checked = false
            })
            newArr.push(res1.data)
            this.recentPeopleListAll = newArr.flat()
            this.recentPeople = newArr.flat()
            console.log(this.recentPeople)
          })
        }
      })
    },
    /**
     * 功能: 搜索框搜索人员
     * params:   {$event:鼠标事件对象}
     * return:   无
     */
    onSearch(value) {
      if (value) {
        let nameList = []
        nameList.push(value)
        let params = {
          match: false,
          names: nameList,
        }
        searchUserIdMiddle(params).then(res => {
          const newData = res.data.filter((item) => item.userId)
          newData.map(item => {
            item.checked = false
          })
          newData.sort(this.compare('name'))
          this.remotaData = newData
        })
      } else {
        Message.error('搜索关键词不能为空')
      }
    },
    // 数组排序
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1.length - value2.length;
      }
    },
    /**
     * 功能: 选择搜索框的下拉内容
     * params:   {$event:鼠标事件对象}
     * return:   无
     */
    selectedEmployeeChange(value) {
      // console.log('原数据', this.recentPeopleListAll)
      // console.log('选择的数据', JSON.parse(value.key))
      this.recentPeopleListAll.push(JSON.parse(value.key))
      this.recentPeople.push(JSON.parse(value.key))
      this.recentPeopleList = []
      this.recentPeopelIndeterminate = false
      //数组对象去重
      const hash_1 = {}, hash_2 = {}
      this.recentPeopleListAll = this.recentPeopleListAll.reduce((item, next) => {
        hash_1[next.userId] ? '' : hash_1[next.userId] = true && item.push(next)
        return item
      }, [])
      this.recentPeople = this.recentPeople.reduce((item, next) => {
        hash_2[next.userId] ? '' : hash_2[next.userId] = true && item.push(next)
        return item
      }, [])
    },
    /**
     * 功能: es6数组去重
     * return:
     */
    setData(arr) {
      return Array.from(new Set(arr))
    },
    //确定
    handleOk() {
      this.addNewMember();
      // if (this.modalMemberType != '') {
      //   this.recentPeopleList.push(this.modalMemberType)
      // }
     
      // this.$emit('initDataList', this.recentPeopleList)
      // console.log(this.recentPeopleList)
    },
    //关闭弹框
    handleCancel() {
      this.$emit('closeUser')
    },
    /*
    * 功能: 全选复选框监听事件
    * params:   {$event:鼠标事件对象}
    * return:   无
    */
    checkAllBtn($event){
      let modalType = this.modalType
      // let  sasa = this.selectedEmployee
      switch(modalType){
        //新增成员
        case 1:
            this.recentPeopelIndeterminate = false
            this.selectedRecentPeopleList = this.checkSubFunc(this.recentPeople, this.selectedRecentPeopleList, $event.target.checked)
            break
        //通知成员
        case 2:
            this.notifyMemberIndeterminate = false
            this.selectedNofifyMemberList = this.checkSubFunc(this.notifiableMemberTypeList,this.selectedNofifyMemberList,$event.target.checked)
            this.selectedNofifyMemberList = []
            this.notifiableMemberTypeList.forEach(ele=>{
                ele.checked = $event.target.checked
                this.selectedNofifyMemberList.push(ele)
            })
            if(!$event.target.checked){
                this.selectedNofifyMemberList = []
            }
        break
      }
    },
    /*
    * 功能: 全选复选框辅助功能
    * params:   {checkableList:可选数据数组,checkedList:已选数据数组,isCheckAll:是否全选}
    * return:   无
    */
    checkSubFunc(checkableList, checkedList, isCheckAll){
      console.log(checkableList, 'checkableList')
      console.log(checkedList, 'checkedList')
      console.log(isCheckAll, 'isCheckAll')
        let arr = checkedList.filter(ele => {
            return ele.remotePeople
        })
        checkedList.splice(0, checkedList.length)
        checkableList.forEach(ele=>{
            ele.checked = isCheckAll 
            checkedList.push(ele)
        })
        if(!isCheckAll){
            checkedList.splice(0,checkedList.length)
        }
        checkedList = [...arr,...checkedList]
        // console.log(checkedList)
        return checkedList
    },
    /*
    * 功能: 全选复选框监听事件
    * params:   {$event:鼠标事件对象}
    * return:   无
    */
    // checkAll($event) {
    //   let modalType = this.modalType
    //   switch (modalType) {
    //     case 1:
    //       this.recentPeopelIndeterminate = false
    //       this.checkSubFunc(this.recentPeople, this.selectedRecentPeopleList, $event.target.checked)
    //       break
    //     case 2:
    //       this.notifyMemberIndeterminate = false
    //       this.checkSubFunc(this.notifiableMemberTypeList, this.selectedNofifyMemberList, $event.target.checked)
    //       break
    //   }
    // },
    /*
    * 功能: 远程搜索时查询数据
    * params:   无
    * return:   无
    */
    handleSearch(value) {
      if(!value&&!value.length){
                this.$message.warn('请输入有效信息再搜索!')
                return
            }
            value = value.trim()
            if(value === ''){
                this.$message.warn('请输入有效信息再搜索!')
                return 
            }
            let params = {
                // keyword:value,
                names:[value],
                userIds:[value],
                match:false,
            }
            // searchManagerMiddle(params).then(res=>{
            searchUserIdMiddle(params).then(res=>{
                if(res.status == 200){
                    let arr = []
                    res.data = res.data.filter(ele=>{
                        return ele.userId 
                    })
                    res.data.forEach(ele=>{
                        // arr.push({...ele,value:ele.name+"("+ele.userNo+")"})
                        let obj = {
                            name:ele.userId?ele.name+" ("+ele.userId+")":ele.name,
                            userId:ele.userId,
                            userNo:ele.userNo,
                            deptAndPost:ele.department+'/'+ele.post
                        }
                        arr.push(obj)
                    })
                    arr.sort((a,b)=>{
                        return a.name.localeCompare(b.name)
                    })
                    console.log(arr)
                    this.$nextTick(()=>{
                        this.$set(this,'remotaData',arr)
                        // this.$set(this,'recentPeople',arr)
                        this.$set(this,'searched',true)
                    })
                    
                }else{
                    this.$message.info('服务器繁忙,搜索人员信息失败!')
                }
            })
    },
    /*
    * 功能: 远程搜索时下拉框的change事件
    * params:   无
    * return:   无
    */
    handleChange(value) {
      if (this.modalType == 1) {
        this.selectedRecentPeopleList = this.selectedRecentPeopleList.filter(ele => {
          return !ele.remotePeople
        })
      } else if (this.modalType == 2) {
        this.selectedNofifyMemberList = this.selectedNofifyMemberList.filter(ele => {
          return !ele.remotePeople
        })
      }
      if (value instanceof Array) {
        value.forEach(ele => {
          let item = JSON.parse(ele)
          item.remotePeople = true
          if (this.modalType == 1) {
            this.selectedRecentPeopleList.push(item)
          } else if (this.modalType == 2) {
            this.selectedNofifyMemberList.push(item)
          }
        })
      } else {
        let item = JSON.parse(ele)
        item.remotePeople = true
        this.selectedRecentPeopleList.push(item)
      }
    },
    /*
    * 功能: 模态框中复选元素事件
    * params:   {e:鼠标事件对象,item:操作对象数据,arr:寻找选中item的数组对象,column:用于判断的字段名}
    * return:   无
    */
    checkBoxChangeEvent(e, item, arr, column) {
      if (e.target.checked) {
        item.checked = true
        arr.push(item)
      } else {
        let index1 = this.findIndex(arr, item, column)
        if (index1 != -1) {
          arr.splice(index1, 1)
        }
      }
        let tempArr = this.modalType ==1?this.recentPeople:this.modalType==2?this.notifiableMemberTypeList:[]
            let indeterminate = false
            let checkedAllRecentePeople = false
            let checkNoRecentPeople = false
            let index = tempArr.findIndex(ele=>{
                return !ele.checked
            })
            if(index ==-1){
                checkedAllRecentePeople = true
            }
            index = tempArr.findIndex(ele=>{
                return ele.checked
            })
            if(index ==-1){
                checkNoRecentPeople = true
            }
            if(checkedAllRecentePeople){
                this.rencentAllPeople = true
            }
            
            indeterminate = !checkedAllRecentePeople && !checkNoRecentPeople
            switch(this.modalType){
                case 1:
                    this.$set(this,'recentPeopelIndeterminate',indeterminate)
                    this.rencentAllPeople = checkedAllRecentePeople
                    break
                case 2: 
                    this.$set(this,'notifyMemberIndeterminate',indeterminate)
                    this.nofityAllMember = checkedAllRecentePeople
                    break
            }
      // switch (this.modalType) {
      //   case 1:
      //     this.recentPeopelIndeterminate = arr.length && (arr.length < this.recentPeople.length)
      //     if (arr.length == this.recentPeople.length) {
      //       this.recentPeopelIndeterminate = true
      //     }
      //     break
      //   case 2:
      //     this.notifyMemberIndeterminate = arr.length && (arr.length < this.notifiableMemberTypeList.length)
      //     if (arr.length == this.notifiableMemberTypeList.length) {
      //       this.nofityAllMember = true
      //     }
      //     break
      // }
    },
    /*
    * 功能: 模态框中展示已选列表清除事件
    * params:   {item:操作对象数据,sltedDataList:寻找选中item的数组对象,column:用于判断的字段名}
    * return:   无
    */
    clearCheckBoxShowPanel(item, sltedDataList, column = 'name') {
      console.log(item);
      console.log(sltedDataList);
      let index = this.findIndex(sltedDataList, item, column)
      if (index != -1) {
        sltedDataList.splice(index, 1)
      }
      index = this.findIndex(this.recentPeople, item, column)
      if (index == -1) {
        if (this.selectedEmployee instanceof Array) {
          this.selectedEmployee.forEach((ele, indexs) => {
            let listItem = JSON.parse(ele)
            if (listItem[column] == item[column]) {
              this.selectedEmployee.splice(indexs, 1)
            }
          })
        } else {
          this.selectedEmployee = undefined
        }
      }
      this.$set(item, 'checked', false)
      let indeterminate = false
            let tempArr = this.modalType ==1?this.recentPeople:this.modalType==2?this.notifiableMemberTypeList:[]
            if(sltedDataList.length){
                let checkedAllRecentePeople = false
                let checkNoRecentPeople = false
                let indexValue = tempArr.findIndex(ele=>{
                    return !ele.checked
                })
                if(indexValue ==-1){
                    checkedAllRecentePeople = true
                }
                indexValue = tempArr.findIndex(ele=>{
                    return ele.checked
                })
                if(indexValue ==-1){
                    checkNoRecentPeople = true
                }
                if(checkedAllRecentePeople){
                    this.rencentAllPeople = true
                }
                indeterminate = !checkedAllRecentePeople && !checkNoRecentPeople
            }
      this.$set(this,'recentPeopelIndeterminate',indeterminate)
                    this.rencentAllPeople = checkedAllRecentePeople
     
    },
    /*
        * 功能: 查询对象在数组中的下标
        * params:   {obj:对象元素,arr:寻找选中item的数组对象,column:用于判断的字段名}
        * return:   obj在arr中的下标,不存在返回-1
        */
        findIndex(arr,obj,column='name'){
            let value = obj[column]
            let index = arr.findIndex(ele=>{
                return ele[column] == value
            })
            return index
        },
        selectedMemberTypeChange(){
            this.recentPeople.forEach(ele=>{
                this.$set(ele,'checked',false)
            })
            this.$nextTick(()=>{
                this.$set(this,'selectedEmployee',undefined)
                this.$set(this,'selectedRecentPeopleList',[])
                this.$set(this,'searched',false)
                this.$set(this,'recentPeopelIndeterminate',false)
            })
            
        },
        /*
        * 功能: 新增成员
        * params:   无
        * return:   无
        */
        addNewMember(isContinue){
          console.log(this.selectedRecentPeopleList);
            let params = {
                userId: this.userInfo.loginName,
                oid:'OR:com.pisx.pmgt.project.PIProject:'+sessionStorage.getItem('oid'),
                roleShortNames:[],
                userIds:[]
            }
            
            if(this.modalVisible){
                if(!this.selectedRecentPeopleList.length){
                    if(!isContinue){
                      //  this.clearModalData()
                        this.getDataProjectTeam({userId:this.userInfo.loginName,oid:'OR:com.pisx.pmgt.project.PIProject:'+sessionStorage.getItem('oid')})
                    }else{
                        this.$message.warn('新增成员时,请至少选中一个人员!')
                    }
                    return
                } 
                params.roleShortNames=[this.modalMemberType]
                this.selectedRecentPeopleList.forEach(ele=>{
                    params.userIds.push(ele.userId)
                    // let index = this.findIndex(this.recentPeople,ele)
                    // if(index == -1){
                    //     this.recentPeople.push(ele)
                    // }
                })
            }else{
                this.selectedRecentPeopleList.forEach(ele=>{
                    params.userIds.push(ele.memberId)
                })
                // 复制的角色类型信息
                // this.copyTypeArr.forEach(ele=>{
                //     params.roleShortNames.push(ele.memberType)
                // })
            }
            let staffList = params.userIds.join(',')
            // this.spinning = true
          
            //把数据上传给中台
            saveRecentUser({staffList,userId:this.userInfo.loginName}).then(res=>{
                this.selectedRecentPeopleList.forEach(ele=>{
                    let index = this.findIndex(this.recentPeople,ele)
                    if(index == -1){
                        this.recentPeople.push(ele)
                    }
                })
                if(res.status == 200 && res.data.result){
                  this.$message.info('添加成功!')
                 // console.log(this.userInfo);
                 console.log(params.userIds);
                  
                    // this.selectedRecentPeopleList.forEach()
                }else{
                    this.$message.info('服务器繁忙!')
                }
                // let index = this.findIndex(this.recentPeople,ele)
            })
            this.$emit('initDataList',params.userIds);
            // this.spinning = false
            // if(isContinue){
            //      addRoleTeamMember(params).then(res=>{
            //         if(res.status == 200 && res.data && res.data.success){
            //             this.$message.warn('新增成员成功')
            //             // this.selectedRecentPeopleList.forEach(ele=>{
            //             //     let index = this.findIndex(this.recentPeople,ele)
            //             //     if(index == -1){
            //             //         this.recentPeople.push(ele)
            //             //     }
            //             // })
            //             this.addNewMemberOperateIsApplication = true
            //             this.selectedMemberTypeChange()
            //         }else{
            //             this.$message.info('服务器繁忙,新增成员失败!')
            //         }
            //     })
            // }else{
            //     addRoleTeamMember(params).then(res=>{
            //         if(res.status == 200 && res.data && res.data.success){
            //             this.$message.warn('新增成员成功')
            //             // this.selectedRecentPeopleList.forEach(ele=>{
            //             //     let index = this.findIndex(this.recentPeople,ele)
            //             //     if(index == -1){
            //             //         this.recentPeople.push(ele)
            //             //     }
            //             // })
            //             this.addNewMemberOperateIsApplication = false
            //             this.clearModalData()
            //             this.getDataProjectTeam({userId:this.userInfo.loginName,oid:'OR:com.pisx.pmgt.project.PIProject:'+sessionStorage.getItem('oid')})
            //         }else{
            //             this.$message.info('服务器繁忙,新增成员失败!')
            //         }
            //     })
            // }
        },
         /**
     * 获取某一个oid权限
     */
    
  }
};
</script>
<style lang="less" scoped>
.addTeamMember {
  > div {
    margin-top: 10px;
  }
  > div:nth-child(1) {
    margin-top: 0px;
  }
  .recentPeopleList {
    width: 540px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    .memberPanle {
      border-bottom: 1px solid #ddd;
    }
    .memberPanle {
      padding-left: 10px;
      padding-right: 10px;
    }
    .memberPanle,
    .clearFloat {
      height: 32px;
      line-height: 32px;
    }
    .recentPeoplePanel {
      height: 232px;
      overflow-y: auto;
      overflow-x: hidden;
      .memberItem {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
      }
      .memberItem:hover {
        background: #e8f0fd;
      }
      .checkCont {
        width: 100%;
        height: 30px;
        margin-left: 10px;
      }
      .checkBoxNum {
        width: 97%;
        color: #666666;
        font-size: 14px;
      }
    }
  }
  .checkName_lo {
    width: 310px;
    text-align: right;
    color: #999999;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rigthListPanel {
    width: 540px;
    height: 232px;
    overflow-y: auto;
  }
  .modalDept {
    height: 30px;
    font-size: 12px;
    color: #999999;
    text-align: right;
    line-height: 30px;
    margin-left: 10px;
  }
  .selectedRecentPersonSpan {
    display: inline-block;
    height: 27px;
    background: #f8f8f8;
    border-radius: 2px;
    line-height: 27px;
    margin-top: 10px;
    margin-right: 20px;
    padding-right: 10px;
    .selectedRctPerItem {
      line-height: 27px;
      height: 27px;
      font-size: 12px;
      color: #666666;
      text-align: left;
      margin-left: 10px;
      margin-right: 10px;
    }
    .selectedRctPerItem:nth-child(2) {
      margin-left: 10px;
      margin-right: 10px;
    }
    .clearSltedRctPer {
      width: 8px;
      height: 8px;
      cursor: pointer;
    }
  }
  .rigthNumNotifySpan {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    height: 20px;
    font-size: 14px;
    color: #999999;
    line-height: 20px;
  }
}
</style>